<template>
  <a-select
    :disabled="disabled"
    :mode="mode"
    @change="changeHandler"
    :allowClear="allowClear"
    placeholder="请选择"
    v-model="value">
    <a-select-option :key="item.key"
                     :value="item.value"
                     v-for="item in options">
      {{item.label}}
    </a-select-option>

  </a-select>

</template>

<script>
  //区域选择

  export default {
    model: {
      prop: 'outValue',
      event: 'change'
    },
    props: {
      outValue: {
        required: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      mode: {
        type: String,
        default: 'default'
      },
      allowClear :{
        type:Boolean,
        required: false,
        default: false
      },
    },
    data() {
      return {
        value:  null,
        options: []
      }
    },
    watch: {
      outValue() {
        this.value = this.outValue
      }
    },
    mounted() {
      this.$axios
        .get(this.$URLMAP.url.xarea.query1)
        .then((response) => {
          this.options = response.data.map(item => {
            return {
              label: item.name,
              value: item.id,
              key: item.id
            }
          })
          if (this.outValue != null) {
            this.value = this.outValue
          } else {
            if (this.mode === 'multiple') {
              this.value = []
            } else {
              if(this.options.length > 0)
                this.value = this.options[0].value
            }

          }
          this.$emit('change', this.value)
        })
    },
    methods: {
      changeHandler(input) {
        this.$emit('change', input)
      }
    }
  }
</script>

<style>
</style>